<template>
<div class="mod-config">
  <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
    <el-form-item>
      <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
    </el-form-item>
    <el-form-item>
      <el-button @click="getDataList()">查询</el-button>
      <el-button v-if="isAuth('product:brand:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
      <el-button v-if="isAuth('product:brand:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
    <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
    <el-table-column prop="brandId" header-align="center" align="center" label="品牌id"></el-table-column>
    <el-table-column prop="name" header-align="center" align="center" label="品牌名"></el-table-column>
    <el-table-column prop="logo" header-align="center" align="center" label="品牌logo地址">
      <template slot-scope="scope">
        <!-- <el-image
              style="width: 100px; height: 80px"
              :src="scope.row.logo"
          fit="fill"></el-image>-->
        <img :src="scope.row.logo" style="width: 100px; height: 80px" />
      </template>
    </el-table-column>
    <el-table-column prop="descript" header-align="center" align="center" label="介绍"></el-table-column>
    <el-table-column prop="showStatus" header-align="center" align="center" label="显示状态">
      <template slot-scope="scope">
        <el-switch v-model="scope.row.showStatus" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0" @change="updateBrandStatus(scope.row)"></el-switch>
      </template>
    </el-table-column>
    <el-table-column prop="firstLetter" header-align="center" align="center" label="检索首字母"></el-table-column>
    <el-table-column prop="sort" header-align="center" align="center" label="排序"></el-table-column>
    <el-table-column fixed="right" header-align="center" align="center" width="250" label="操作">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="updateCatelogHandle(scope.row.brandId)">关联分类</el-button>
        <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.brandId)">修改</el-button>
        <el-button type="text" size="small" @click="deleteHandle(scope.row.brandId)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
  <!-- 弹窗, 新增 / 修改 -->
  <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>

  <el-dialog title="关联分类" :visible.sync="cateRelationDialogVisible" width="60%">
    <el-popover placement="right-end" v-model="popCatelogSelectVisible">
      <category-cascader :catelogPath.sync="categoryPath"></category-cascader>
      <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="popCatelogSelectVisible = false">取消</el-button>
        <el-button type="primary" size="mini" @click="addCatelogSelect">确定</el-button>
      </div>
      <el-button slot="reference">新增关联</el-button>
    </el-popover>
    <div class="line-20"></div>
    <el-table :data="cateRelationTableData" style="width: 100%">
      <el-table-column prop="id" label="#"></el-table-column>
      <el-table-column prop="brandName" label="品牌名"></el-table-column>
      <el-table-column prop="categoryName" label="分类名"></el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="deleteCateRelationHandle(scope.row.id, scope.row.brandId)">移除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cateRelationDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="cateRelationDialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>
import AddOrUpdate from "./brand-add-or-update";
import CategoryCascader from "../common/category-cascader";

import { WarningConfirm, SuccessMessage } from "@/utils/message.js";
import {
  BrandListApi,
  BrandUpdateStatusApi,
  BrandDeleteApi
} from "@/api/product/brand.js";
import {
  CategoryBrandRelationSaveApi,
  CategoryBrandRelationDeleteApi,
  CategoryBrandRelationCategoryListApi
} from "@/api/product/categoryBrandRelation.js";

export default {
  data() {
    return {
      dataForm: {
        key: ""
      },
      brandId: 0,
      categoryPath: [],
      dataList: [],
      cateRelationTableData: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      cateRelationDialogVisible: false,
      popCatelogSelectVisible: false
    };
  },
  components: {
    AddOrUpdate,
    CategoryCascader
  },
  activated() {
    this.getDataList();
  },
  methods: {
    addCatelogSelect() {
      //{"brandId":1,"catelogId":2}
      this.popCatelogSelectVisible = false;
      CategoryBrandRelationSaveApi({
        brandId: this.brandId,
        categoryId: this.categoryPath[this.categoryPath.length - 1]
      }).then((data) => {
        this.getCateRelation();
      });
    },
    deleteCateRelationHandle(id, brandId) {
      CategoryBrandRelationDeleteApi([id]).then(({ data }) => {
        this.getCateRelation();
      });
    },
    updateCatelogHandle(brandId) {
      this.cateRelationDialogVisible = true;
      this.brandId = brandId;
      this.getCateRelation();
    },
    getCateRelation() {
      CategoryBrandRelationCategoryListApi(this.brandId).then((data) => {
        this.cateRelationTableData = data.data;
      });
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      BrandListApi({
        page: this.pageIndex,
        limit: this.pageSize,
        key: this.dataForm.key
      }).then(data => {
        this.dataList = data.data.list || [];
        this.totalPage = data.data.totalCount || 0;
        this.dataListLoading = false;
      });
    },
    updateBrandStatus(data) {
      let { brandId, showStatus } = data;
      //发送请求修改状态
      BrandUpdateStatusApi({ brandId, showStatus }).then(({ data }) => {
        SuccessMessage("状态更新成功");
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    // 删除
    deleteHandle(id) {
      var ids = id ? [id] :
        this.dataListSelections.map(item => {
          return item.brandId;
        });
      WarningConfirm(() => {
        BrandDeleteApi(ids).then(data => {
          SuccessMessage("品牌删除成功", () => {
            this.getDataList();
          });
        });
      }, `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`);
    }
  }
};
</script>

<style lang="scss" scoped></style>
